<template>
  <div class="login">
    <div class="login-box">
      <!-- <div class="login-name">登录</div> -->
      <div class="acount">
        <input type="text" v-model="phone" placeholder="请输入手机号" />
      </div>
      <div class="password">
        <input type="password" v-model="pawd" placeholder="请输入密码" />
      </div>

      <div class="bootoms">
        <div>
          <input type="button" @click="logins" value="登录" />
          <div class="wang" @click="forget">忘记密码</div>
        </div>
        <div>
          <input type="button" value="注册" @click="register" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { testLogin } from "../../network/login";
export default {
  name: "Login",
  data() {
    return {
      phone: "",
      pawd: "",
    };
  },

  methods: {
    logins() {
      testLogin(this.phone, this.pawd).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$Cookie.set("userid", res.data.data.uid, { expires: 7 });
          if (res.data.data.uadmin == 1) {
            this.$router.push("/home");
          } else if (res.data.data.uadmin == 0) {
            this.$Cookie.set("uadmin", res.data.data.uadmin, { expires: 7 });
            this.$router.push("/admin");
          }
        } else {
          this.$message({
            showClose: true,
            message: "手机号或密码错误",
            type: "error",
          });
        }
      });
    },

    register() {
      this.$router.push("/register");
    },

    forget() {
      this.$router.push("/forget");
    },
  },
};
</script>

<style>
.login {
  width: 100%;
  height: 100vh;
  background-image: url("../../assets/img/bg/bg5.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
}
.login-box {
  width: 30%;
  background-color: rgba(126, 187, 223, 0.8);
  box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.8);
  margin: 0 auto;
  text-align: center;
  padding-bottom: 3%;
  border-radius: 0.05rem;
}

/* .login-name {
  font-size: 0.15rem;
  margin-top: 0.2rem;
} */

.acount input,
.password input {
  width: 70%;
  height: 0.25rem;
  padding: 0 0.05rem 0 0.05rem;
  margin-top: 10%;
  border-radius: 5px;
  padding-left: 0.1rem;
}

.acount {
  margin-top: 6%;
}

.login-box input {
  background-color: rgba(255, 255, 255, 0.7);
  outline: none;
}

.login-box input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.6);
}

.bootoms {
  width: 100%;
  display: flex;
  margin-top: 10%;
}

.bootoms div {
  flex: 1;
}

.bootoms input {
  width: 50%;
  height: 0.25rem;
  background-color: rgba(79, 164, 255, 0.6);
  border-radius: 0.03rem;
  color: #fff;
  cursor: pointer;
}

.wang {
  margin-top: 0.05rem;
  color: rgb(161, 161, 161);
  cursor: pointer;
}

.wang:hover {
  color: rgb(150, 197, 247);
}
</style>